<template>
  <div>
    <el-form :model="form" inline>
      <el-form-item>
        <el-input v-model="form.printCode" placeholder="请输入或者扫描买家退回运单号或商品标签或我们发给买家的运单号或我们退回给上家的运单号"
          style="width: 630px; " @keydown.enter='onSubmit' />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="tableContents" style="margin-top: 80px; ">
    <div>
      <el-image style="width: 300px; height: 300px" :src="contents.skuPic" fit="fill" />
    </div>
    <div class='contentSKU'>
      <p><span>订单号:{{ contents.orderNo }}</span><span>淘宝订单状态：{{ contents.refundStatus }}</span></p>
      <p><span>SKU信息:{{ contents.skuInfo }}</span></p>
      <p><span>退回数量:{{ contents.backNum }}件</span></p>
      <p><span>淘宝订单归属公司：{{ contents.company }}</span></p>
      <p><span>上家订单状态:{{ contents.processOrderStatus }}</span></p>
      <el-button type="primary" @click="qualityTesting(contents)" style="margin: 49px;"
        v-if="contents.isShowButton == 1">质检通过</el-button>
      <el-button type="primary" @click="NoQualityTesting(contents)" v-if="contents.isShowButton == 1">质检不通过</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { warehousePrintorderInfo, warehousePrintApprove } from '@/api/index'
import { ElMessage } from 'element-plus'
const form = ref({})
const onSubmit = () => {
  getList()
  form.value.printCode = ''
}
const contents = ref({})
const getList = () => {
  warehousePrintorderInfo(form.value.printCode).then(res => {
    const { data: { data } } = res
    console.log(data)
    contents.value = data
  })
}
const SetwarehousePrintApprove = (row, type) => {
  warehousePrintApprove({
    id: row.id,
    orderFrom: row.orderFrom,
    isPass: type
  }).then(res => {
    ElMessage.success('操作成功')
  })
}
const qualityTesting = (row) => {
  SetwarehousePrintApprove(row, 1)
}
const NoQualityTesting = (row) => {
  SetwarehousePrintApprove(row, 2)
}
</script>

<style lang='less' scoped>
.tableContents {
  display: flex
}

.contentSKU {
  margin-left: 30px
}

.contentSKU p {
  line-height: 25px
}
</style>
